import React,{memo,useState} from 'react'
import { Avatar,Typography ,Badge } from 'antd'
import {useNavigate} from "react-router";
const { Paragraph, Text } = Typography;
function ImList(props, ref){
  let url = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2';
  const [count, setCount] = useState(0);
  const [selected,setSelected] = useState(0)
  const navigate = useNavigate();

  const  urlFun = (id,type,name)=>{
    setSelected(id)
    props.onheaderText(name)
    navigate("/imPage/imInfo",{state:{id:id,type:type}})
  }

  return <>
   <div onClick={()=>urlFun(0,"gr","单聊模式")} className={selected === 0? "im-item im-selected":"im-item"}>
      <div className="im-item-l">
        <Badge count={count}>
        <Avatar size={45} src={url} />
        </Badge>
      </div>
      <div className="im-item-r">
        <div className="im-r-t">
          <Text style={{color: selected ===0?"#fff":"#333"}} className="text-l" ellipsis={true}>
            Ant Design, a design language for background applications, is refined by Ant UED Team.
          </Text>
          <Text style={{color: selected ===0?"#fff":"#999999"}} className="text-l" ellipsis={true}>
            2024/05/05
          </Text>

        </div>
        <div className="im-r-t" >
          <Text style={{color: selected ===0?"#fff":"#999999"}} ellipsis={true}>
            111
          </Text>
        </div>
      </div>
   </div>

    <div onClick={()=>urlFun(1,'ql','群聊模式')} className={selected === 1? "im-item im-selected":"im-item"}>
      <div className="im-item-l">
        <Badge count={count}>
          <Avatar size={45} src={url} />
        </Badge>
      </div>
      <div className="im-item-r">
        <div className="im-r-t">
          <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
            Ant Design, a design language for background applications, is refined by Ant UED Team.
          </Text>
          <Text style={{color: selected ===1?"#fff":"#999999"}} className="text-l" ellipsis={true}>
            2024/05/05
          </Text>

        </div>
        <div className="im-r-t" >
          <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
            Ant Design, a design language for background applications, is refined by Ant UED Team.
          </Text>
        </div>
      </div>

    </div>

  </>

}

export default memo(ImList);
